<template>
  <view class="list-view">
    <view class="item" v-for="(item, index) in list" :key="index" @click="clickItem(item, index)">
      <view class="left-wrap">
        <acme-avatar :src="item.avatar" size="95rpx"></acme-avatar>
        <view class="text-wrap">
          <text class="name">{{item.name}}</text>
          <text class="brief">{{item.brief}}</text>
        </view>
      </view>
      <view class="btn" :class="{'active': item.follow}" @click="chickButton(index)">
        {{item.follow ? '关注': '已关注'}}
      </view>
    </view>
  </view>
</template>

<script>
  import AcmeAvatar from '@/components/acme-design/avatar/index.vue'
  
  export default {
    components: {
      AcmeAvatar
    },
    data() {
      return {
        list: [
          {
            name: '-裸烟粉',
            brief: '穿搭/护肤/美妆',
            avatar: '/static/photo/m_1.jpg',
            follow: false
          },{
            name: '来自海边的小锦鲤',
            brief: '设计就应该多看，多思考，多练习',
            avatar: '/static/photo/m_3.jpg',
            follow: false
          },{
            name: '来自海边的小锦鲤',
            brief: '设计就应该多看，多思考，多练习',
            avatar: '/static/photo/m_5.jpg',
            follow: true
          }
        ]
      }
    },
    methods: {
      clickItem(item, index) {
        
      },
      chickButton(index) {
        this.$set(this.list[index], 'follow', !this.list[index].follow)
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #fff;
  }
</style>

<style lang="scss" scoped>
  .list-view {
    
    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      position: relative;
      padding: 25upx 0;
      
      &::after {
        content: '';
        height: 1px;
        background-color: #E5E5E5;
        transform: scaleY(0.5);
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
      }
      
      .left-wrap {
        display: flex;
        align-items: center;
        
        .text-wrap {
          flex: 1;
          display: flex;
          flex-direction: column;
          margin-left: 25upx;
          
          text {
            display: block;
            line-height: 1;
          }
          
          .name {
            width: 300upx;
            color: #333;
            font-size: 28upx;
            font-weight: 500;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          
          .brief {
            width: 385upx;
            color: #999;
            font-size: 26upx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-top: 18upx;
          }
        }
      }
      
      $btn-height: 55upx;
      
      .btn {
        width: 135upx;
        height: $btn-height;
        line-height: $btn-height;
        text-align: center;
        color: #999;
        font-size: 26upx;
        position: relative;
        border-radius: $btn-height;
        
        &::after {
          content: '';
          border: 1px solid #DAD9D9;
          position: absolute;
          top: -50%;
          bottom: -50%;
          left: -50%;
          right: -50%;
          transform: scale(0.5);
          border-radius: $btn-height;
        }
        
        &.active {
          color: #fff;
          background-color: red;
          
          &::after {
            content: '';
            border: 0;
          }
        }
      }
    }
  }
</style>
